<template>
  <div class="channel">
    <!-- 我的频道 -->
    <van-cell title="我的频道">
      <van-button size="small" class="edit" round @click="isEdit = !isEdit">{{
        isEdit ? '完成' : '编辑'
      }}</van-button>
    </van-cell>
    <!-- 标签区 -->
    <van-grid gutter="0.2rem">
      <van-grid-item
        v-for="(item, index) in myChannel"
        :key="item.id"
        :text="item.name"
        :class="['mychannel-item', { active: item.name === '推荐' }]"
        @click="changeActive(index, item)"
      >
        <!-- 可以用数组将动态类名和固有类名包裹 -->
        <!-- {动态类名：bool} -->
        <!-- 添加条件将推荐的❌移除 -->
        <template #icon>
          <van-icon name="cross" v-show="isEdit && item.name !== '推荐'" />
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 推荐频道 -->
    <van-cell title="推荐频道" />
    <!-- 标签区 -->
    <van-grid gutter="0.2rem">
      <van-grid-item
        class="recommend-item"
        v-for="item in recommendChannel"
        :key="item.id"
        :text="item.name"
        icon="plus"
        @click="$emit('add-channel', item)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels as getAllChannelsAPI } from '@/api'
export default {
  props: {
    myChannel: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      isEdit: false,
      allChannels: []
    }
  },
  created() {
    this.getAllChannels()
  },
  // 计算推荐列表
  // 用find找出相同的item后取反返回新数组中
  computed: {
    recommendChannel() {
      return this.allChannels.filter(
        (aItem) => !this.myChannel.find((mItem) => aItem.id === mItem.id)
      )
      //   return this.allChannels.reduce((pre, cur) => {
      //     const res = this.myChannel.find((mItem) => cur.id === mItem.id)
      //     if (!res) {
      //       pre.push(cur)
      //     }
      //     return pre
      //   }, [])
    }
  },
  methods: {
    // 请求所有频道
    async getAllChannels() {
      try {
        const { data } = await getAllChannelsAPI()
        // console.log(data)
        this.allChannels = data.data.channels
      } catch (error) {
        console.log(error)
      }
    },
    changeActive(index, item) {
      // 判断是否在编辑状态
      if (this.isEdit) {
        if (item.name === '推荐') return
        // 编辑状态删除标签
        this.$emit('del-channel', item.id)
        console.log()
      } else {
        // 完成状态
        // 1.关闭弹窗
        this.$emit('close')
        // 2.跳转acitve
        this.$emit('change-active', index)
      }
    }
  }
}
</script>

<style scoped lang="less">
.active {
  :deep(.van-grid-item__text) {
    color: red;
  }
}
.channel {
  padding-top: 1.33333rem;
  .edit {
    width: 104px;
    height: 48px;
    color: red;
    &.van-button--default {
      border-color: red;
    }
  }
  :deep(.van-grid-item__content) {
    background: #eee;
  }
  .recommend-item {
    :deep(.van-grid-item__content) {
      flex-direction: row;
      align-items: center;
      :deep(.van-grid-item__icon) {
        font-size: 20px;
        &.van-grid-item__text {
          margin-top: 0;
        }
      }
    }
  }

  :deep(.mychannel-item) {
    .van-grid-item__content {
      position: relative;
    }
    .van-grid-item__icon-wrapper {
      position: unset;
    }
    .van-icon-cross {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 30px;
      border: 2px solid #000;
      border-radius: 50%;
      transform: translate(25%, -25%);
      z-index: 2;
    }
  }
}
</style>
